<template>
<div id="testShow">
  <h1>{{title}}</h1>
  <div class="container">
    <el-tabs type="border-card" v-model="activeName" @tab-click="fn">
      <el-radio v-model="platformR" label="1">H5</el-radio>
      <el-radio v-model="platformR" label="2">PC</el-radio>

      <el-button
        size="small"
        @click="addCmapage"
      >   添加
      </el-button>
      <el-tab-pane v-for="item in tils" :key="item.id"  :label="item.pageName" :name="item.id"  >
        <el-table
          :data="datas"
          border
          style="width: 100%">
          <el-table-column
            prop="title"
            label="名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="previewImg"
            label="预览图"
            width="180">

            <template   slot-scope="scope">
              <img :src="scope.row.previewImg"  min-width="70" height="70" />
              <el-popover trigger="hover" placement="top">

                <div >
                  <img :src="scope.row.previewImg"  />
                </div>
              </el-popover>
            </template>

          </el-table-column>
          <el-table-column
            prop="description"
            label="模板描述"
            width="180">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="时间">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleUseClick(scope.row.id)" type="text" size="small">使用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div class="main">

    </div>
  </div>
</div>
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
        title:"普通页面",
        datas: [],
        tils: [],
        activeName: '1',
        platformR:[]
      };
    },
    mounted(e) {
      this.showCmsPageType();
      this.setTable();
      console.log('mounted:', this.$route);
    },
    methods: {

      details: function() {

        let this_ = this;
        let params = {};
        params.id = this_.$route.query.id;
        this.utils.request.editCmsPage(params, function (data) {

          console.log(data.data);
          if (data.data != null) {
                return data.data;
          }
        });

      },
      showCmsPageType: function() {

        let this_ = this;
        let params = {};
        params.id = this_.$route.query.id;

        this.utils.request.queryCmsPageTypes(params, function (data) {

          if (data.data != null) {
            this_.tils = data.data;

          }
        });

      },
      setTable: function(id) {


        let this_ = this;
        let params = {};
        params.pageType = id;
        this.utils.request.getCmsTpageList(params, function (data) {

          console.log(data.data);
          if (data.data != null) {
            this_.datas = data.data.rows;
          }
        });
      },
      fn (tab){

        let this_ = this;
        let params = {};
        params.pageType = tab.name;
        this.utils.request.getCmsTpageList(params, function (data) {

          console.log(data.data);
          if (data.data != null) {
            this_.datas = data.data.rows;
          }
        });


      },
      handleUseClick:function (id) {

        console.log(id)
        var params = {};
        params.id = id;

        var this_ = this;
        this.utils.request.useCmsTpage(params, function (res) {
          if (res.code == "0000") {
            // this_.$message({message: "操作成功", type: "success"});
            // this_.findPage(null);

            this_.$router.push({
              path: '/CmsPage?id =' + res.data
            })

          } else {
            this_.$message({message: "操作失败, " + res.msg, type: "error"});
          }
        });


      },
      addCmapage:function(){

        console.log(this.platformR);
        this.$router.push({
          path: '/AddCmsTpages/'
        })
      }
    }
  }
</script>
<style scoped>
  .tab {
    disable: flex;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .el-icon-plus{
    border: 1px dashed #d9d9d9;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #2F4554;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .dis input{
    background-color: #F5F7FA;
  }
  .selectshangjia{
    width: 400px;
    height: 32px;
    line-height: 32px;
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    background-color: #F5F7FA;
    border-color: #E4E7ED;
    color: #C0C4CC;
    cursor: not-allowed;
  }
  .selectshangjia::-webkit-input-placeholder {
    color: #C0C4CC;
  }

  .selectshangjia::-ms-input-placeholder {
    color: #C0C4CC;
  }
</style>


